<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: boBrother
 * @LastEditTime: 2022-01-06 20:08:01
-->
<template>
  <div id="left_1_container" style="height: 95%"></div>
</template>


<script>
import { get } from "@/utils/request.js";
import moment from "moment";
import { Line } from "@antv/g2plot";
export default {
  data() {
    return {
      deviceData: [],
      params: {
        page: 1,
        pageSize: 50,
      },
      chart: null,
    };
  },
  computed: {
    chartData() {
      return this.deviceData.map((item) => {
        return {
          date: moment(item.insert_time).format("hh:mm"),
          "温度/℃": parseFloat(item.temperature),
        };
      });
    },
  },
  methods: {
    initChart() {
      if (this.chart) {
        this.chart.destroy();
      }
      this.chart = new Line("left_1_container", {
        data: this.chartData,
        padding: "auto",
        xField: "date",
        yField: "温度/℃",
        xAxis: {
          // type: 'timeCat',
          tickCount: 5,
        },
        yAxis: {},
      });
      this.chart.render();
    },

    getQueryRealData() {
      get("/dashboard/pageQueryData", {
        ...this.params,
        device_id: 28,
      }).then((res) => {
        this.deviceData = res.data.list;
        this.initChart();
      });
    },
  },

  mounted() {
    this.getQueryRealData();
    setInterval(() => {
      this.getQueryRealData();
    }, 6000);
  },
};
</script>


